<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div style="width:200px;height:200px;background:skyblue"></div>
		<script type="text/javascript">
			var div = document.querySelector("div");
			var preRadian,	//
				nowRadian,
				rotate=0;
			
			div.addEventListener("touchstart",function(e){
				var touches = e.targetTouches;
				console.log(touches[0]);
				if(touches&&touches.length==2){
					preRadian = Math.atan2(
						touches[0].clientY - touches[1].clientY,
						touches[0].clientX - touches[1].clientX
					);
					div.addEventListener("touchmove",touchmoveFun);
					
				}
			})
			
			function touchmoveFun(e){
				
				var touches = e.targetTouches;
				
				if (touches && touches.length == 2)
				{
					var nowRadian = Math.atan2(
						touches[0].clientY - touches[1].clientY,
						touches[0].clientX - touches[1].clientX);
					rotate +=180 / Math.PI * (nowRadian - preRadian)
					div.style.transform = "rotate("+rotate+"deg)";
					div.style.webkitTransform = "rotate("+rotate+"deg)";
					preRadian = nowRadian;
					
				}
				e.preventDefault();
			}
			
			
			//手指离开则取消滑动事件
			div.addEventListener("touchend",function(e){
				div.removeEventListener("touchmove",touchmoveFun)
			})
			
			
			
			
		</script>
	</body>
</html>
